<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的知识信息列表</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="${ctx}/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="${ctx}/qbdmsStatic/iconfont/iconfont.css"/>
    <link rel="stylesheet" href="${ctx}/qbdmsStatic/style/qbdms.css">
    <script type="text/javascript">
        var __ctx = "${ctx}";
    </script>
    <style>
        .layui-tab.layui-tab-brief{
            position: absolute;
            top: 20px;
            left: 40px;
            bottom: 20px;
            right: 42px;
            /*overflow: auto;*/
        }
        .layui-tab .layui-tab-title{
            border-bottom:none ;
            left: 90px;
            position: absolute;
        }
        .layui-tab .layui-tab-title li{
            color:#A1A3A9 ;
            font-size: 16px;
            padding: 0 24px;
        }
        .layui-tab-title .layui-this:after{
            top:2px;
        }
        .layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after{
            border-bottom-color: #2682FF;
        }
        .layui-tab-brief>.layui-tab-title .layui-this{
            color:#2682FF ;
        }
        .layui-card-header.config{
            border-bottom:none ;
            color: #656877;
            font-size: 14px;
            font-weight: bold;
            margin-top: 16px;
        }
        .layui-btn-container .qbdms-btn-config{
            background-color:#fff ;
            border: 1px solid #E5F0FF;
            width: 144px;
            height: 44px;
            line-height: 44px;
            color:#656877 ;
            font-size: 14px;
            margin:0 20px 20px 0;
            position: relative;
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
        }
        .layui-btn-container .qbdms-btn-config i{
            position: absolute;
            bottom: -14px;
            color: #2682FF;
            right: 0;
        }
        .layui-btn-container .qbdms-btn-config:hover{
            color:#2682FF;
            background-color:#F6F9FE ;
            border-color: #2682FF;
        }
        .layui-btn-container .layui-btn.qbdms-configs{
            color:#2682FF;
            background-color:#F6F9FE ;
            border-color: #2682FF;
        }
        /*滚动条样式*/
        .qbdms-list-content .right-list::-webkit-scrollbar {
            width: 4px;
            /*height: 4px;*/
        }
        .qbdms-list-content .right-list::-webkit-scrollbar-thumb {
            border-radius: 10px;
            /*-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*/
            background: #c1c5cd;
        }
        .qbdms-list-content .right-list::-webkit-scrollbar-track {
            /*-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);*/
            border-radius: 0;
            background: #f5f5f5;

        }
        #list .layui-icon-star-fill{
            color: #2682ff;
        }
        #list .layui-icon.iconcollection{
            cursor: pointer;
            margin-left: 16px;
        }
        #list span.collections{
            margin-left: 0;
        }
        #list2 .layui-icon-star-fill{
            color: #2682ff;
        }
        #list2 .layui-icon.iconcollection{
            cursor: pointer;
            margin-left: 16px;
        }
        #list2 span.collections{
            margin-left: 0;
        }

        .layui-tab-content .layui-tab-item{
            height: 100%;
        }
        .qbdms-noData{
            position: absolute;left: 50%;top:40%;transform:translate(-50%,-40%);
            display: none;
            text-align: center;
            z-index: 1111;
        }
        .qbdms-noData div{
            margin-top: 10px;
        }
        .layui-tab-title .iconfont{
            margin-right: 6px;
        }
        .layui-tab .layui-tab-title li .iconfont{
            color: #c0c4cc;
        }
        .layui-tab .layui-tab-title li.layui-this .iconfont{
            color: #2682FF;
        }
        .qbdms-list-content .right-list .caller-main{
            left: 80px!important;
        }
        .qbdms-list-content .right-list{
            padding-left: 0!important;
            bottom: 46px;
        }
        div.qbdms-list{
            padding: 0!important;
        }
        #qbdmspage2,#qbdmspage{
            position: absolute;
            right: 24px;
            bottom:-12px;
        }
        .qbdms-list .qbdms-title{
            position: absolute;
            right: 0;
            top: -54px;
        }
    </style>
</head>
<body class="listBody">
    <div class="qbdms-bodyDiv" style="position: relative">
        <div class="qbdms-noData" id="zwsc">
            <img src="${ctx}/qbdmsStatic/images/no.png" alt="">
            <div>暂无收藏</div>
        </div>
        <div class="qbdms-noData" id="zwgz">
            <img src="${ctx}/qbdmsStatic/images/no.png" alt="">
            <div>暂无关注</div>
        </div>
        <div style="background-color: #fff;height: 100%">
            <div class="layui-table-view-body" style="padding: 0 24px 24px;">
                <div class="qbdms-formTitle" style="border-bottom: 1px solid #E5F0FF;font-size: 16px">我的知识</div>
                <div class="layui-tab layui-tab-brief" lay-filter="wQbdMyKnowledge">
                    <ul class="layui-tab-title">
                        <li class="layui-this" lay-id="mysc"><i class="iconfont data-iconcommon_shoucang-solid" ></i>我的收藏</li>
                        <li  lay-id="mygz"><i class="iconfont data-iconcommon_follow"  ></i>我的关注</li>
                        <li  lay-id="sz"><i class="iconfont data-iconcommon_push1" ></i>推送设置</li>
                    </ul>
                    <div class="layui-tab-content" style=" position: absolute; top: 45px; bottom: 0; right: 0; left:0px">
                        <div class="layui-tab-item layui-show">
                            <div class="qbdms-list" style="padding: 0">
                                <div class="layui-table-view-body " style="height: 100%;position: relative;padding: 0">
                                    <div class="qbdms-title" >
                                        <div class="rightCon">
                                            <div style="display: inline-block;position: relative">
                                                <input name="content" id="content" type="text" class="layui-input" placeholder="请输入" style="width:232px " />
                                                <i class="layui-icon layui-icon-search" qbdms-event="selCon"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="qbdms-list-content" style="right: 0;left: 0;top:0">
                                        <div class="right-list layui-form" id="right-list" style="left: 0">
                                            <div id="list">
                                            </div>
                                        </div>
                                    </div>
                                    <div id="qbdmspage">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-item" id="gz">
                            <div class="qbdms-list" style="padding: 0">
                                <div class="layui-table-view-body " style="height: 100%;position: relative;padding: 0">
                                    <div class="qbdms-title">
                                        <div class="rightCon">
                                            <div style="display: inline-block;position: relative">
                                                <input name="content" id="content2" type="text" class="layui-input" placeholder="请输入" style="width:232px " />
                                                <i class="layui-icon layui-icon-search" qbdms-event="selCon2"></i>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="qbdms-list-content" style="right: 0;left: 0;top:0">
                                        <div class="right-list layui-form" id="right-list2" style="left: 0;">
                                            <div id="list2">
                                            </div>
                                        </div>
                                    </div>
                                    <div id="qbdmspage2">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="layui-tab-item">
                            <div class="layui-card-header config">设置您感性趣的知识分类</div>
                            <div class="layui-card-body">
                                <div class="layui-btn-container">
                                </div>

                            </div>
                        </div>
                </div>
            </div>
            </div>
        </div></div>
<script src="${ctx}/qbdmsStatic/public/configFile.js"></script>
<script src="${ctx}/layui/layui.js"></script>
<script>
    //一般直接写在一个js文件中
    layui.config({
        base: serverPath.qbdmsPath + staticPath.qbdmsPath //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index','setter', 'form', 'common','jquery','layer','tree','laypage','element','publicMethods'], function () {
        var setter = layui.setter;
        var form = layui.form;
        var common = layui.common;
        var $ = layui.jquery;
        var layer = layui.layer;
        var tree=layui.tree;
        var laypage = layui.laypage;
        var publicMethods = layui.publicMethods;
        var element = layui.element;
        var tab="${tab}";
        element.tabChange('wQbdMyKnowledge', tab);
        if (tab=="mysc"||tab==""){
            query(1,1);
        }
        if (tab=="mygz"){
            query(2,1);
        }
        var   aa=true;
        //刚进入list刷新
        function query (type,page){
             console.log(type,page);
            var content=$("#content").val();
            var url=serverPath.qbdmsPath + "/qbdms/wQbdMyKnowledge/collection/list";
            var list_id="#list";
            var page_id="qbdmspage";
            if (type==2){
                content=$("#content2").val();
                 page_id="qbdmspage2"
                 list_id="#list2";
                 url=serverPath.qbdmsPath + "/qbdms/wQbdMyKnowledge/list";
            }
            $(list_id).html("");
            $(".qbdms-noData").css('display','none');
            var data={
                content:content,
                page: page,
                limit:10
            }
            $.ajax({
                url:url,
                type: "post",
                data: data,
                dataType: 'json',
                success: function (data) {
                    var count=data.count;
                    var data =data.data;
                    if(count==0){
                        if(type==1){
                            $("#zwsc").css('display','block');
                            return ;
                        }
                        if(type==2){
                            $("#zwgz").css('display','block');
                            return ;
                        }
                    }

                    if(type==1){
                        var list=  dataShowSC(data)
                        $(list_id).append(list);
                    }

                    if(type==2){
                        var list=  dataShowGZ(data)
                        $(list_id).append(list);
                    }
                    // var list=  dataShow(data)
                    // $(list_id).append(list);
                        laypage.render({
                            elem: page_id
                            ,count: count
                            ,curr:page
                            ,groups:2
                            ,layout: ['count', 'prev', 'page', 'next', 'limit', 'skip']
                            ,jump: function(obj,first){
                                //obj包含了当前分页的所有参数，比如：
                                var limit=obj.limit;
                                var page=obj.curr
                                //首次不执行
                                if(!first){
                                    //do something
                                    query(type,page);
                                }

                            }
                        });


                    form.render();
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                }
            })
            if (type==1){
                tab="mysc"
            }
            if (type==2){
                tab="mygz"
            }
        }

        function getlistPage(){

        }

        element.on('tab(wQbdMyKnowledge)', function(data){
            $('.iconfont.data-iconcommon_shoucang-solid').addClass('data-iconcommon_shoucang').removeClass('data-iconcommon_shoucang-solid');
            $('.iconfont.data-iconcommon_follow-solid').addClass('data-iconcommon_follow').removeClass('data-iconcommon_follow-solid');
            if(data.index=='0'){
                $(this).find('i').addClass('data-iconcommon_shoucang-solid');
                query(1,1);
            }else if(data.index=='1'){
                query(2,1);
                $(this).find('i').addClass('data-iconcommon_follow-solid').removeClass('data-iconcommon_follow');

            }else{
                 dic();
            }
        });

        var events={
            //收藏
            collection:function () {
                var obj=this;
                var id=$(obj).attr("id");
                var status=$(obj).attr("value")
                sc(id,status);
                var domIconColl=$(this).parent().find('.iconcollection');
                events.collectionPub($(this),domIconColl)
            },
            iconcollection:function(){
                var obj=this;
                var id=$(obj).attr("id");
                var status=$(obj).attr("value")
                sc(id,status);
                var domColl=$(this).parent().find('.collections');
                events.collectionPub(domColl,$(this))
            },
            collectionPub:function(dom,icon){
                if(dom.attr('value')==='1'){
                    dom.attr('value','0');
                    dom.html('取消收藏');
                    icon.addClass('layui-icon-star-fill').removeClass('layui-icon-star');
                }else {
                    dom.attr('value','1');
                    dom.html('收藏');
                    icon.addClass('layui-icon-star').removeClass('layui-icon-star-fill');
                }
            },
            //搜索
            selCon:function(){
                query(1,1)
            },
            selCon2:function(){
                query(2,1)
            },
            //下载文件
            downloadFile:function () {
                var obj=this;
                var fileId=$(obj).attr("fileId");
                window.location.href =  "${ctx}"+setter.extendLinkPath + "attachFile/download?fileId=" + fileId;
            },
            //详情
            particulars:function () {
                var obj=this;
                var id=$(obj).attr("id");
                window.location.href = serverPath.qbdmsPath + "/qbdms/wQbdMyKnowledge/view/particulars?id="+id+"&tab="+tab;
            },
            configs:function (obj) {
                var knowledge_classifica=$(obj).attr("value");
                $.ajax({
                    url: serverPath.qbdmsPath + "/qbdms/wQbdMyKnowledge/save",
                    type: "post",
                    data: {knowledge_classifica: knowledge_classifica},
                    dataType: 'json',
                    success: function (data) {
                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                    }
                })
                if($(this).attr('index')==='1'){
                    $(this).removeClass('qbdms-configs');
                    $(this).find('i').removeClass('data-iconcommon_xuanzhong');
                    $(this).attr('index','0')
                }else{
                    $(this).addClass('qbdms-configs');
                    $(this).find('i').addClass('data-iconcommon_xuanzhong');
                    $(this).attr('index','1')
                }
            }
        };

        //字典
        function dic(){
            $(".qbdms-noData").css('display','none');
            $.ajax({
                url: serverPath.qbdmsPath + "/qbdms/wQbdMyKnowledge/getKnowDic",
                type: "post",
                // data: {id: id},
                dataType: 'json',
                success: function (data) {
                    var dicList=data.dicList;
                    var myDicList=data.myDicList;
                    var html= dataDicShow(dicList,myDicList);
                    $('.layui-btn-container').html(html);
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                }
            })

        }

        function   dataDicShow(data,myDicList) {
            var htmlCon='';
            layui.each(data,function (i,item) {
                if(myDicList.length!=0){
                    var status=false;
                    layui.each(myDicList,function (j,itemDic) {
                        if(item.id==itemDic.knowledge_classifica){
                            htmlCon=htmlCon+ '<button title="'+item.title+'" class="layui-btn qbdms-btn-config qbdms-configs" qbdms-event="configs" index="1"   value="'+item.id+'" >'+item.title+'<i class="iconfont data-iconcommon_xuanzhong"></i></button>'
                            status=true;
                            return true;
                        }
                    })
                }
                    if (status){
                        return false;
                    }else{
                        htmlCon=htmlCon+ '<button  title="'+item.title+'"  class="layui-btn qbdms-btn-config" qbdms-event="configs" index="0"   value="'+item.id+'" >'+item.title+'<i class="iconfont"></i></button>'
                    }



            })
            return htmlCon;
        }


        function dataShowSC(data){
            var htmlCon='';
            layui.each(data,function (i,item) {
                console.log(item)
                var filenameType= JSON.parse(item.enclosure)[0].fileName;
                var reg = RegExp(/.pdf/);
                if(filenameType.match(reg)){
                    filenameType="${ctx}/qbdmsStatic/images/pdf.png"
                }else{
                    filenameType="${ctx}/qbdmsStatic/images/word.png"
                }
                var htmlsc='';
                if(item.collectionStatus=="收藏"){
                    htmlsc='<i class="layui-icon layui-icon-star iconcollection" qbdms-event="iconcollection" id="'+item.id+'" value="1"></i><span qbdms-event="collection" id="'+item.id+'" value="1" class="collections">收藏</span>';
                }else{
                    htmlsc='<i class="layui-icon layui-icon-star-fill iconcollection" qbdms-event="iconcollection" style="color: #2682ff" id="'+item.id+'" value="0"></i><span qbdms-event="collection" class="collections" id="'+item.id+'" value="0">取消收藏</span>';
                }
                var html_edit_delete='';
                htmlCon=htmlCon+'<div class="caller-item"><img src="'+filenameType+'" alt=""> <div class="caller-main"> <p title="'+item.knowledgeName+'" class="main-tit"  id="'+item.id+'" qbdms-event="particulars">'+item.knowledgeName+'</p>'+
                    '<p class="detailed">'+item.summaryDocument+'</p>'+
                    '<div class="main-fun"> <div class="leftCon"> <span class="classification">密级:'+item.secret+'</span>'+
                    '<span class="nameInfo">'+item.fillman+'</span> <span class="timeInfo">发布于 '+publicMethods.timeData(item.createTime)+'</span> </div> <div class="rightCon">'+
                    '<span qbdms-event="downloadFile" fileId="'+item.fileId+'" ><i class="layui-icon layui-icon-link" style="font-size: 12px"></i>下载文件</span>'+
                    html_edit_delete+
                    htmlsc+
                    ' </div> </div> </div> </div>'
            });
            return  htmlCon;
        }


        function dataShowGZ(data){
            var htmlCon='';
            layui.each(data,function (i,item) {
                var filenameType= JSON.parse(item.enclosure)[0].fileName;
                var reg = RegExp(/.pdf/);
                if(filenameType.match(reg)){
                    filenameType="${ctx}/qbdmsStatic/images/pdf.png"
                }else{
                    filenameType="${ctx}/qbdmsStatic/images/word.png"
                }
                var htmlsc='';
                if(item.collectionStatus=="收藏"){
                    htmlsc='<i class="layui-icon layui-icon-star iconcollection" qbdms-event="iconcollection" id="'+item.id+'" value="1"></i><span qbdms-event="collection" id="'+item.id+'" value="1" class="collections">收藏</span>';
                }else{
                    htmlsc='<i class="layui-icon layui-icon-star-fill iconcollection" qbdms-event="iconcollection" style="color: #2682ff" id="'+item.id+'" value="0"></i><span qbdms-event="collection" class="collections" id="'+item.id+'" value="0">取消收藏</span>';
                }
                var html_edit_delete='';
                htmlCon=htmlCon+'<div class="caller-item"><img src="'+filenameType+'" alt=""> <div class="caller-main"> <p title="'+item.knowledgeName+'" class="main-tit"  id="'+item.id+'" qbdms-event="particulars">'+item.knowledgeName+'</p>'+
                    '<p class="detailed">'+item.enclosureContent+'</p>'+
                    '<div class="main-fun"> <div class="leftCon"> <span class="classification">密级:'+item.secret+'</span>'+
                    '<span class="nameInfo">'+item.fillman+'</span> <span class="timeInfo">发布于 '+publicMethods.timeData(item.createTime)+'</span> </div> <div class="rightCon">'+
                    '<span qbdms-event="downloadFile" fileId="'+item.fileId+'" ><i class="layui-icon layui-icon-link" style="font-size: 12px"></i>下载文件</span>'+
                    html_edit_delete+
                    htmlsc+
                    ' </div> </div> </div> </div>'
            });
            return  htmlCon;
        }
        /**
         *  收藏
         * @param id
         * @param status
         */
        function sc(id,status) {
            if (id == ""||typeof id == "undefined") {
                layer.alert(publicMethods.confirmStyle('请先选择一行数据!'),{title: false,skin: 'confirm-class'});
            } else {
                $.ajax({
                    url: serverPath.qbdmsPath + "/qbdms/wQbdQualityKnow/sc",
                    type: "post",
                    data: {qualityknowledgeid:id, status:status},
                    dataType: 'json',
                    success: function (data) {
                        // layer.alert(publicMethods.confirmStyle(data.msg),{title: false,skin: 'confirm-class'});

                    },
                    error: function (XMLHttpRequest, textStatus, errorThrown) {
                        layer.alert(publicMethods.confirmStyle(data.msg),{title: false,skin: 'confirm-class'});
                    }
                })
            }
        }

        //点击事件
        $('body').on('click', '*[qbdms-event]', function(){
            var othis = $(this) ,
                attrEvent = othis.attr('qbdms-event');
            events[attrEvent] && events[attrEvent].call(this, othis);
        });
    });
</script>
</body>
</html>